<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-11 14:49:37
 * @LastEditTime: 2023-11-16 21:55:24
 * @LastEditors: sueRimn
-->



<template>
  <view class="all-brand-box">
    <view class="title">全部品牌</view>
    <view
      v-for="brands in list"
      :key="brands.initial"
    >
      <view class="initial">{{brands.initial}}</view>
      <view class="list-wrap d-flex flex-wrap">
        <view
          class="item"
          v-for="item in returnBrandList(brands)"
          :key="item.brandId"
          @click="$emit('handleBrandClick', item.brandId)"
        >
          <common-image
            :src="item.brandImage ? item.brandImage+'?x-oss-process=image/resize,m_fill,w_80' : ''"
            :styles="'width: 80rpx; height: 80rpx; display: block; margin: 0 auto; border-radius: 20rpx;'"
          />
          <view class="text">{{item.brandName}}</view>
        </view>
      </view>
    </view>

     <!-- 没找到商品 -->
    <!-- <view class="not_find_product flex flex-align-center flex-between" v-if="!loading">
      <view class="font-24 color-000">找不到机型？</view>
      <view class="btn u-default-btn flex flex-center" @click="callKf">
        <text>联系客服</text>
        <uni-icons type="right" size="12" color="#333333" />
      </view>
    </view> -->
  </view>
</template>


<script>
export default {
  props: {
    list: { type: Array, default: [] },
    loading: { type: Boolean, default: true },
  },

  methods: {
    returnBrandList(item) {
      return item.list || []
    }
  }
}
</script>

<style lang="scss" scoped>

.all-brand-box{
  margin: 24rpx 0 0 0;
}

.title{
  padding: 0 24rpx; 
  font-size: var(--hui-font-size-28);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--hui-color-title); 
}
.initial{
  padding: 0 28rpx;
  line-height: 62rpx;
  height: 62rpx;
}

.list-wrap{
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 32rpx 20rpx 0rpx 20rpx;
  margin: 24rpx;
  .item{
    width: 33%;
    margin: 0 0 32rpx 0;
    .text{
      font-size: var(--hui-font-size-26);
      font-weight: 500;
      color: var(--hui-color-title);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      margin: 20rpx 0 0 0;
    }
  }
}


.not_find_product{
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 10rpx 10rpx 10rpx 34rpx;
  margin: 30rpx 0;
  .btn{
    font-size: 22rpx;
    font-weight: normal;
    width: 150rpx;
    line-height: 60rpx;
    border-radius: 30rpx;
  }
}

</style>